<template>
  <div class="page-container">
    <!-- 主内容区 -->
    <div class="main-section">
      <!-- 左侧商品展示区 -->
      <div class="product-media">
        <!-- 视频/图片展示 -->
        <div class="media-container">
          <video v-if="productDetail.video" controls class="product-video">
            <source :src="productDetail.video" type="video/mp4">
          </video>
          <img v-else :src="productDetail.image" :alt="productDetail.name" class="product-image">
        </div>
        <!-- 缩略图列表 -->
        <div class="thumbnail-list">
          <img v-for="(image, index) in productDetail.images"
               :key="index"
               :src="image"
               class="thumbnail-image">
        </div>
      </div>
    </div>

      <!-- 右侧购买区域 - 使用sticky定位 -->
      <div class="purchase-section">
        <!-- 商品标题和价格 -->
        <div class="product-header">
          <h1 class="product-title">{{ productDetail.title }}</h1>
          <div class="price-section">
            <div class="current-price">
              <span class="price-symbol">¥</span>
              <span class="price-amount">{{ productDetail.price }}</span>
              <span class="original-price">¥{{ productDetail.originalPrice }}</span>
            </div>
            <div class="sales-info">
              已售 {{ productDetail.sales }}+
            </div>
          </div>
          <div class="promotion-info">
            <span class="sellPoint">{{ productDetail.sellPoint }}</span>
          </div>
        </div>

        <!-- 配送信息 -->
        <div class="delivery-section">
          <div class="section-item">
            <span class="label">配送:</span>
            <span class="content">
              <span>广东广州</span>
              <span class="divider">至</span>
              <span>天津西青</span>
            </span>
          </div>
          <div class="delivery-extra">快递: 免运费 承诺24/小时内发货</div>
        </div>

        <!-- 商品选项 -->
        <div class="options-section">
          <div class="color-options">
            <span class="label">颜色分类:</span>
            <div class="option-list">
              <div
                v-for="color in colors"
                :key="color.id"
                :class="['option-item', { active: selectedColor === color.id }]"
                @click="selectedColor = color.id"
              >
                <img :src="color.icon" :alt="color.name">
                <span>{{ color.name }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 数量选择 -->
        <div class="quantity-section">
          <span class="label">数量:</span>
          <div class="quantity-control">
            <button @click="decreaseQty" :disabled="quantity <= 1">-</button>
            <input
              type="number"
              v-model.number="quantity"
              min="1"
              :max="productDetail.stock"
            >
            <button @click="increaseQty" :disabled="quantity >= productDetail.stock">+</button>
            <span class="stock-info">有货</span>
          </div>
        </div>

        <!-- 购买按钮 -->
        <div class="action-buttons">
          <button class="btn-buy" @click="handleBuyNow">立即购买</button>
          <button class="btn-cart" @click="handleAddToCart">加入购物车</button>
          <button class="btn-favorite" @click="toggleFavorite">
            <i class="favorite-icon"></i>
            <span>收藏</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 评价区域 -->
    <div class="reviews-section">
      <!-- 选项卡 -->
      <div class="tab-list">
        <div
          v-for="tab in tabs"
          :key="tab.key"
          :class="['tab-item', { active: currentTab === tab.key }]"
          @click="currentTab = tab.key"
        >
          {{ tab.name }}
        </div>
      </div>

      <!-- 评价统计 -->
      <div v-if="currentTab === 'reviews'" class="review-stats">
        <div class="review-total">
          全部({{ reviewStats.total }}+)
          <span class="review-filter">有图/视频({{ reviewStats.withMedia }})</span>
          <span class="review-filter">追评({{ reviewStats.additional }})</span>
        </div>
        <div class="review-tags">
          <span v-for="tag in reviewTags"
                :key="tag.name"
                class="tag-item"
          >
            {{ tag.name }} ({{ tag.count }})
          </span>
        </div>
      </div>

      <!-- 评价列表 -->
      <div v-if="currentTab === 'reviews'" class="review-list">
        <div v-for="review in reviews" :key="review.id" class="review-item">
          <div class="reviewer-info">
            <img :src="review.avatar" class="avatar" alt="用户头像">
            <span class="name">{{ review.name }}</span>
          </div>
          <div class="review-content">{{ review.content }}</div>

          <!-- 显示评论中的照片和视频 -->
          <div v-if="review.media?.length" class="review-media">
            <!-- 显示图片 -->

          <!-- 显示评论中的照片和视频 -->
          <div v-if="review.media?.length" class="review-media">
            <!-- 显示图片 -->
            <img
              v-for="(media, index) in (review.media)"
              :key="index"
              :src="media.fileUrl"
              class="media-image"
            >
            <!-- 显示视频 -->
            <video
              v-for="(media, index) in filteredVideos(review)"
              :key="index"
              :src="media.fileUrl"
              controls
              class="media-video"
            ></video>
            <!-- 显示视频 -->
            <video
              v-for="(media, index) in filteredVideos(review)"
              :key="index"
              :src="media.fileUrl"
              controls
              class="media-video"
            ></video>
          </div>
        </div>
      </div>

      <!-- 评论输入区域 -->
      <div class="comment-section">
        <h3>添加评论</h3>
        <textarea v-model="newComment" placeholder="输入你的评论..." rows="4"></textarea>

        <!-- 文件上传 -->
        <input
          type="file"
          multiple
          accept="image/*, video/*"
          @change="handleFileUpload"
        >

        <!-- 显示已选择的文件 -->
        <div v-if="files.length > 0" class="file-preview">
          <div v-for="(file, index) in files" :key="index" class="file-item">
            <img v-if="file.type.startsWith('image')" :src="file.preview" class="preview-image">
            <video v-else-if="file.type.startsWith('video')" :src="file.preview" controls class="preview-video"></video>
            <button @click="removeFile(index)">删除</button>
      
      <!-- 评论输入区域 -->
      <div class="comment-section">
        <h3>添加评论</h3>
        <textarea v-model="newComment" placeholder="输入你的评论..." rows="4"></textarea>

        <!-- 文件上传 -->
        <input
          type="file"
          multiple
          accept="image/*, video/*"
          @change="handleFileUpload"
        >

        <!-- 显示已选择的文件 -->
        <div v-if="files.length > 0" class="file-preview">
          <div v-for="(file, index) in files" :key="index" class="file-item">
            <img v-if="file.type.startsWith('image')" :src="file.preview" class="preview-image">
            <video v-else-if="file.type.startsWith('video')" :src="file.preview" controls class="preview-video"></video>
            <button @click="removeFile(index)">删除</button>
          </div>
        </div>

        <button @click="addComment">提交评论</button>
      </div>
    </div>

    <!-- 悬浮的联系客服按钮 -->
    <div class="floating-service-btn" @click="showChat = true">
      <i class="icon-service">💬</i>
    </div>
        </div>

        <button @click="addComment">提交评论</button>
      </div>
    </div>

    <!-- 悬浮的联系客服按钮 -->
    <div class="floating-service-btn" @click="showChat = true">
      <i class="icon-service">💬</i>
    </div>

    <!-- 聊天框组件 -->
    <Chat v-if="showChat" @close="showChat = false" />

    <!-- 聊天框组件 -->
    <Chat v-if="showChat" @close="showChat = false" />
  </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import Chat from '../ChatComponent.vue' // 引入 Chat 组件

const route = useRoute()
const router = useRouter()

// 商品详情数据
const productDetail = ref({
  itemTitle: '',
  itemId: '', // 修改为 item_id
  name: '',
  price: 249,
  sales: 5000,
  stock: 999,
  image: '',
  sellPoint: '',
  images: [],
  description: '',
  status: '',
  createTime: 'NOW()'

})

// 颜色选项
const colors = [
  // { id: 1, name: '冷雪白 Plan C 出浴系列', icon: '白色背包图标' },
  // { id: 2, name: '黑曜空 Plan C 出浴系列', icon: '黑色背包图标' },
  // { id: 3, name: '幻海蓝 Plan C 出浴系列', icon: '蓝色背包图标' },
  // { id: 4, name: '淡樱粉 Plan C 出浴系列', icon: '粉色背包图标' }
]
// 添加到购物车
const handleAddToCart = async (item) => {
  const response = await axios.get('/logic/sysuser/current')
  // 检查是否登录
  // const token = response.data.token
  if (!response) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }
  try {
    await axios.post('/cart/add', {
      userName: response.data.data,
      itemId: productDetail.value.itemId,
      itemTitle: productDetail.value.title,
      quantity: 1,
      price: productDetail.value.price,
      status: productDetail.value.status
    }, {
      // headers: {
      //   'Content-Type': 'application/json',
      //   Authorization: `Bearer ${token}` // Token 格式检查
      // }
    })
    ElMessage.success('已添加到购物车')
  } catch (error) {
    if (error.response && error.response.status === 401) {
      ElMessage.warning('请先登录')
      router.push('/login')
    } else {
      ElMessage.error('添加失败，请稍后重试')
      console.error('添加购物车失败:', error)
    }
  }
}
// 添加到收藏夹
const toggleFavorite = async (item) => {
  const response = await axios.get('/logic/sysuser/current')
  // // 检查是否登录
  // const token = response.data.token
  if (!response.data.data) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }
  try {
    await axios.post('/logic/favorites/add', {
      userName: response.data.data,
      itemId: productDetail.value.itemId,
      itemTitle: productDetail.value.title,
      price: productDetail.value.price,
      createTime: productDetail.value.createTime
    })
    // headers: {
    //   'Content-Type': 'application/json',
    //   Authorization: `Bearer ${token}` // Token 格式检查
    // }
    ElMessage.success('已添加到收藏夹')
  } catch (error) {
    if (error.response && error.response.status === 401) {
      ElMessage.warning('请先登录')
      router.push('/login')
    } else {
      ElMessage.error('收藏失败，请稍后重试')
      console.error('收藏失败:', error)
    }
  }
}
// 数量控制方法
const decreaseQty = () => {
  if (quantity.value > 1) quantity.value--
}

const increaseQty = () => {
  if (quantity.value < productDetail.value.stock) quantity.value++
}

// 购买相关方法
const handleBuyNow = async () => {
  // 先检查是否登录
  const response = await axios.get('/logic/sysuser/current')
  if (!response) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }

  // 构建商品订单数据
  const orderItem = {
    itemId: productDetail.value.itemId,
    itemTitle: productDetail.value.title,
    quantity: quantity.value,
    price: productDetail.value.price,
    image: productDetail.value.image,
    selectedColor: colors.find(c => c.id === selectedColor.value)?.name || '',
    status: productDetail.value.status
  }

  // 跳转到订单确认页面并传递数据
  router.push({
    path: '/order/confirm',
    query: {
      orderItems: encodeURIComponent(JSON.stringify([orderItem])),
      totalAmount: (orderItem.price * orderItem.quantity).toFixed(2)
    }
  })
}

// const handleAddToCart = async () => {
//   try {
//     // 这里添加购物车的逻辑
//     ElMessage.success('已添加到购物车')
//   } catch (error) {
//     ElMessage.error('添加失败，请重试')
//   }
// }
//
// const toggleFavorite = () => {
//   // 收藏切换逻辑
// }

// 评价数据
const reviews = ref([{
  id: 1,
  name: '用户***123',
  avatar: '/avatar1.jpg',
  content: '包包质量很好，款式时尚大方，空间够大，很实用！',
  images: ['/review1.jpg', '/review2.jpg']
}])

// 数量控制方法
const decreaseQty = () => {
  if (quantity.value > 1) quantity.value--
}

const increaseQty = () => {
  if (quantity.value < productDetail.value.stock) quantity.value++
}

// 购买相关方法
const handleBuyNow = () => {
  router.push({
    path: '/order/confirm',
    query: {
      products: JSON.stringify([{
        id: productDetail.value.id,
        quantity: quantity.value
      }])
    }
  })
}

// // 添加评论方法
// const addComment = async () => {
//   if (newComment.value.trim() === '' && files.value.length === 0) {
//     ElMessage.warning('评论内容或文件不能为空')
//     return
//   }

//   try {
//     // 创建 FormData 对象
//     const formData = new FormData()
//     formData.append('item_id', productDetail.value.itemId) // 修改为 item_id
//     formData.append('user_id', 123) // 用户 ID（可以从登录信息中获取）
//     formData.append('content', newComment.value) // 评论内容

//     // 添加文件
//     files.value.forEach((file) => {
//       formData.append('files', file.file)
//     })

//     // 发送评论数据到后端
//     const response = await axios.post('/reviews/add', formData, {
//       headers: {
//         'Content-Type': 'multipart/form-data'
//       }
//     })
//     if (response.data.success == null) {
//       ElMessage.success('评论提交成功')
//       // 清空输入框和文件
//       newComment.value = ''
//       files.value = []
//       // 刷新评论列表
//       fetchComments()
//     } else {
//       ElMessage.error('评论提交失败')
//     }
//   } catch (error) {
//     console.error('提交评论失败:', error)
//     ElMessage.error('提交评论失败，请重试')
//   }
// }
// const handleAddToCart = async () => {
//   try {
//     // 这里添加购物车的逻辑
//     ElMessage.success('已添加到购物车')
//   } catch (error) {
//     ElMessage.error('添加失败，请重试')
//   }
// }
//
// const toggleFavorite = () => {
//   // 收藏切换逻辑
// }

// 选中的颜色
const selectedColor = ref(1)

// 购买数量
const quantity = ref(1)

// 当前选中的标签页
const currentTab = ref('reviews')

// 标签页配置
const tabs = [
  {
    key: 'reviews',
    name: '用户评价'
  },
  {
    key: 'params',
    name: '参数信息'
  },
  {
    key: 'detail',
    name: '图文详情'
  },
  {
    key: 'recommend',
    name: '看了又看'
  }
]

// 评价统计数据
const reviewStats = {
  total: 3000,
  withMedia: 56,
  additional: 3
}

// 评价标签
const reviewTags = [
  {
    name: '面料材质很柔软',
    count: 999
  },
  {
    name: '小孩子用很好',
    count: 888
  },
  {
    name: '做工大气',
    count: 777
  },
  {
    name: '质量很好',
    count: 666
  },
  {
    name: '里面容量很大',
    count: 555
  },
  {
    name: '外层面料很好',
    count: 444
  },
  {
    name: '表面材质舒服',
    count: 333
  }
]

// 评价数据

// 控制聊天框显示
const showChat = ref(false)

// 新评论内容
const newComment = ref('')

// 选择的文件
const files = ref([])

// 过滤评论中的图片
// const filteredImages = computed(() => {
//   return (review) => {
//     return review.TbReviewMedia?.filter(media => media.file_type === 'png' || 'jpg') || []
//   }
// })

// 过滤评论中的视频
const filteredVideos = computed(() => {
  return (review) => {
    return review.TbReviewMedia?.filter(media => media.file_type === 'video') || []
  }
})

// 处理文件选择
const handleFileUpload = (event) => {
  const selectedFiles = event.target.files
  if (selectedFiles.length > 0) {
    for (let i = 0; i < selectedFiles.length; i++) {
      const file = selectedFiles[i]
      const reader = new FileReader()
      reader.onload = (e) => {
        files.value.push({
          file: file,
          preview: e.target.result, // 用于预览
          type: file.type // 文件类型（image 或 video）
        })
      }
      reader.readAsDataURL(file)
    }
  }
}

// 删除文件
const removeFile = (index) => {
  files.value.splice(index, 1)
}

// 添加评论方法
const addComment = async () => {
  if (newComment.value.trim() === '' && files.value.length === 0) {
    ElMessage.warning('评论内容或文件不能为空')
    return
  }

  try {
    // 创建 FormData 对象
    const formData = new FormData()
    formData.append('item_id', productDetail.value.itemId) // 修改为 item_id
    formData.append('user_id', 123) // 用户 ID（可以从登录信息中获取）
    formData.append('content', newComment.value) // 评论内容

    // 添加文件
    files.value.forEach((file) => {
      formData.append('files', file.file)
    })

    // 发送评论数据到后端
    const response = await axios.post('/reviews/add', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })

    if (response.data.success == null) {
      ElMessage.success('评论提交成功')
      // 清空输入框和文件
      newComment.value = ''
      files.value = []
      // 刷新评论列表
      fetchComments()
    } else {
      ElMessage.error('评论提交失败')
    }
  } catch (error) {
    console.error('提交评论失败:', error)
    ElMessage.error('提交评论失败，请重试')
  }
}

// 获取评论列表
const fetchComments = async () => {
  try {
    const response = await axios.get(`/reviews/item/${productDetail.value.itemId}`, {
      params: {
        item_id: productDetail.value.itemId // 修改为 item_id
      }
    })
    console.log(response.data)
    reviews.value = response.data // 假设后端返回评论列表
  } catch (error) {
    console.error('获取评论失败:', error)
    ElMessage.error('获取评论失败，请重试')
  }
}

// 组件挂载时初始化
onMounted(() => {
  initProductDetail()
  fetchComments() // 获取评论列表
})

// 初始化数据
const initProductDetail = () => {
  const productData = route.query.productDetail
  if (productData) {
    try {
      const parsed = JSON.parse(productData)
      productDetail.value = {
        ...productDetail.value,
        ...parsed
      }
    } catch (error) {
      ElMessage.error('商品信息加载失败')
      router.push('/')
    }
  }
}
</script>

<style scoped>
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.main-section {
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
}

.product-media {
  width: 60%;
}

.media-container {
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 20px;
}

.product-image,
.product-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.thumbnail-list {
  display: flex;
  gap: 10px;
}

.thumbnail-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
}

.purchase-section {
  width: 40%;
  position: sticky;
  top: 20px;
  align-self: flex-start;
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.product-header {
  margin-bottom: 20px;
}

.product-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}

.price-section {
  background: #fff2e8;
  padding: 15px;
  border-radius: 4px;
}

.current-price {
  display: flex;
  align-items: baseline;
}

.price-symbol {
  color: #ff4400;
  font-size: 16px;
  margin-right: 4px;
}

.price-amount {
  color: #ff4400;
  font-size: 30px;
  font-weight: bold;
}

.original-price {
  color: #999;
  text-decoration: line-through;
  margin-left: 10px;
}

.sales-info {
  color: #999;
  font-size: 14px;
  margin-top: 5px;
}

.promotion-info {
  color: #ff4400;
  font-size: 14px;
  margin-top: 10px;
}

.delivery-section {
  border-top: 1px solid #eee;
  padding: 15px 0;
}

.section-item {
  display: flex;
  margin-bottom: 8px;
}

.label {
  color: #666;
  width: 60px;
  flex-shrink: 0;
}

.delivery-extra {
  color: #666;
  font-size: 14px;
  margin-left: 60px;
}

.options-section {
  border-top: 1px solid #eee;
  padding: 15px 0;
}

.color-options .option-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.option-item {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.option-item.active {
  border-color: #ff4400;
  color: #ff4400;
}

.option-item img {
  width: 20px;
  height: 20px;
}

.quantity-section {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-top: 1px solid #eee;
}

.quantity-control {
  display: flex;
  align-items: center;
}

.quantity-control button {
  width: 32px;
  height: 32px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
}

.quantity-control input {
  width: 50px;
  height: 32px;
  text-align: center;
  border: 1px solid #ddd;
  margin: 0 -1px;
}

.stock-info {
  margin-left: 10px;
  color: #666;
}

.action-buttons {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.btn-buy,
.btn-cart,
.btn-favorite {
  height: 40px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: opacity 0.2s;
}

.btn-buy {
  flex: 1;
  background: #ff4400;
  color: white;
}

.btn-cart {
  flex: 1;
  background: #ffd591;
  color: #333;
}

.btn-favorite {
  width: 40px;
  background: white;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 悬浮的联系客服按钮 */
.floating-service-btn {
  position: fixed;
  right: 20px;
  top: 20px;
  width: 50px;
  height: 50px;
  background-color: #007bff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: background-color 0.2s;
}

.floating-service-btn:hover {
  background-color: #0056b3;
}

.icon-service {
  color: white;
  font-size: 24px;
}

/* 评价区域样式 */
.reviews-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.tab-list {
  display: flex;
  gap: 40px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.tab-item {
  padding: 12px 0;
  cursor: pointer;
  position: relative;
  color: #666;
}

.tab-item.active {
  color: #333;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #ff4400;
}

.review-stats {
  padding: 20px 0;
}

.review-total {
  margin-bottom: 15px;
  font-size: 14px;
}

.review-filter {
  color: #666;
  margin-left: 20px;
}

.review-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.tag-item {
  padding: 6px 12px;
  background: #f5f5f5;
  border-radius: 4px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}

.tag-item:hover {
  background: #ffeee5;
  color: #ff4400;
}

.review-list {
  padding-top: 20px;
}

.review-item {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.review-item:last-child {
  border-bottom: none;
}

.reviewer-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
}

.name {
  color: #666;
  font-size: 14px;
}

.review-content {
  margin: 10px 0;
  line-height: 1.6;
  color: #333;
}

.review-media {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.media-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s;
}

.media-image:hover {
  transform: scale(1.05);
}

.media-video {
  width: 150px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s;
}

.media-video:hover {
  transform: scale(1.05);
}

/* 评论输入区域样式 */
.comment-section {
  margin-top: 20px;
}

.comment-section h3 {
  margin-bottom: 10px;
}

.comment-section textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: none;
}

.comment-section button {
  margin-top: 10px;
  padding: 10px 15px;
  background-color: #ff4400;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.comment-section button:hover {
  background-color: #e63900;
}

/* 文件预览样式 */
.file-preview {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.file-item {
  position: relative;
}

.preview-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.preview-video {
  width: 150px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}

.file-item button {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(255, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .main-section {
    flex-direction: column;
  }

  .product-media,
  .purchase-section {
    width: 100%;
  }

  .purchase-section {
    position: relative;
    top: 0;
  }

  .tab-list {
    gap: 20px;
  }

  .action-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: white;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    margin: 0;
    z-index: 100;
  }

  .floating-service-btn {
    width: 40px;
    height: 40px;
    right: 10px;
    bottom: 10px;
  }

  .icon-service {
    font-size: 20px;
  }
}
</style>
